<!--
 * @Description: 
 * @Autor: Bingo
 * @Date: 2022-12-12 09:48:36
 * @LastEditors: Bingo
 * @LastEditTime: 2024-08-29 17:26:44
-->

<template>
  <div id="container">
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
    <!-- <van-watermark
      :content="userName"
      :gap-x="100"
      :gap-y="200"
      :height="100"
      :width="300"
    /> -->
    <div class="font-size-changer">
      <div class="font-size-changer-item" @click="changeFontSize('add')">
        <img src="./assets/plus.png" class="font-size-changer-item-add-icon" />
      </div>
      <div class="font-size-changer-item" @click="changeFontSize('subtract')">
        <img src="./assets/subtract.png" class="font-size-changer-item-subtract-icon" />
      </div>
      <!-- 退出登录 -->
      <div class="font-size-changer-item" @click="handleGoOut" v-if="isShowLogOut">
        <img src="./assets/out.png" class="font-size-changer-item-subtract-icon" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { useRouter, useRoute } from "vue-router";
import { showConfirmDialog } from "vant";
import { computed } from "vue";
import { LS } from "@/utils/common";
const router = useRouter();
const route = useRoute();
const isShowLogOut = computed(() => route.name !== "login");
const userName = computed(
  () => `${LS.get("SET_INFO")?.login} ${LS.get("SET_INFO")?.username}`
);
const changeFontSize = (type: string) => {
  // 边界值设置
  let max_size = 55;
  let min_size = 45;
  let step = 5;
  // 获取当前字体大小

  let domNode = document.getElementsByTagName("html")[0];
  let htmlFontSize: any = domNode.style.fontSize;

  htmlFontSize = Number(htmlFontSize.replace("px", ""));
  // 放大
  if (type == "add") {
    if (htmlFontSize < max_size) {
      htmlFontSize += step;
    }
  } else {
    if (htmlFontSize > min_size) {
      htmlFontSize -= step;
    }
  }
  // console.log('htmlFontSize',htmlFontSize)
  // 重新赋值
  domNode.style.fontSize = htmlFontSize + "px";
};

// 退出登录
const handleGoOut = () => {
  showConfirmDialog({
    title: "提示",
    message: "是否确认要退出系统?",
  })
    .then(() => {
      localStorage.clear();
      router.push("login");
    })
    .catch(() => {
      // on cancel
    });
};
</script>
<style scoped lang="less">
#container {
  background: #cccccc3d;
  width: 100vw;
  min-height: 100vh;
  font-size: 0.37333rem;
}
.font-size-changer {
  z-index: 666;
  position: fixed;
  bottom: 115px;
  display: flex;
  flex-direction: column;
  right: 20px;
  &-item {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-top: 4px;
    background: white;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
